<!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
<script>
  $(document).ready(function () {
    // Handler for .ready() called.

    function getHeaderHeight() {
        const header = $('header');
        return header.outerHeight(true);
    }
    const headerHeight = getHeaderHeight();

    const $sidebar = $('.sidebar__wrapper-inner');
    $sidebar.css("top", headerHeight);
    const $navigationContainer = $('.navigation__container');
    $navigationContainer.css("top", headerHeight);
    
    const $toc = $('#toc-sidebar');

    $toc.toc({
        minimumHeaders: 2,
        title: '',
        listType: 'ul',
        showSpeed: 'none',
        headers: '.docs h2,.docs h3',
        classes: {
            list: 'toc-sidebar',
            item: 'toc-sidebar__item',
            link: 'toc-sidebar__item-link'
        }
    });

    $toc.on('click', 'a', function () {
        const target = decodeURI($(this).attr('href'));
        const targetElement = $(target);
        const scrollOffset = targetElement.offset().top - headerHeight;

        $('html, body').animate({
            scrollTop: scrollOffset - 10
        }, 300);
    });

    if (!$.trim($toc.html())) {
        $toc.hide();
    }

    const sectionClasses = '.post-content h2, .post-content h3';
    const sections = $(sectionClasses);
    const visibleOffset = 20;
    const nav = $('.toc-sidebar');
    const navHeight = $('.header').outerHeight();

    $(window).on('scroll', function () {
        const currentPosition = $(this).scrollTop();

        sections.each(function () {
            const top = $(this).offset().top - navHeight - visibleOffset;
            let bottom = top + $(this).outerHeight();
            const nextElement = $(this).nextAll(sectionClasses).first();

            if (nextElement && nextElement.length > 0) {
                bottom = $(nextElement).offset().top - navHeight - visibleOffset;
            }

            if (currentPosition >= top && currentPosition <= bottom) {
                nav.find('a').removeClass('active');
                sections.removeClass('active');

                $(this).addClass('active');
                nav.find('a[href="#' + encodeURI($(this).attr('id')) + '"]').addClass('active');
            }
        });
    });

    $(window).on('load', function() {
        const hash = window.location.hash;
        
        if(hash) {
            const hashParts = hash.split('-');
            const navItem = $(`li a[href='${hashParts[0]}']`);
            const navItemHref = navItem.attr('href');

            if(hash !== navItemHref) {
                if(hashParts[0] === navItemHref) {
                    navItem.addClass('active');
                }
            }
            
            const target = decodeURIComponent(hash);
            const targetElement = $(target);

            if(targetElement.length && targetElement.offset()) {
                const scrollOffset = targetElement.offset().top - headerHeight;

                $('html, body').animate({
                    scrollTop: scrollOffset - 10
                }, 0);
            }
        }
    });
});

</script>

<div class="sidebar__wrapper-inner">
  <div id="toc-sidebar"></div>
</div>
